<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ToDoList-最简单的待办事项列表</title>
		<style type="text/css">
			body {
				margin: 0px;
				padding: 0px;
				background-color: #cdcdcd;
				font-size: 16px;
			}
			/*header*/
			.header {
				height: 50px;
				background-color: rgba(47,47,47,0.98);
			}
			.headerTop {
				margin:0 auto;
				width: 600px;
				height: 50px;
				/*background: lightcoral;*/
			} 
			label{
				float:left;
				width:100px;
				line-height:50px;
				color:#DDD;
				font-size:24px;
				cursor:pointer;
				font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
				} 
			.header input {
				float: right;
				width: 360px;
				height: 24px;
				margin-top: 12px;
				text-indent: 1em;
				border: none;
				border-radius: 5px;
				box-shadow: 0 1px 0 rgba(255,255,255,0.24);
				}
			input:focus {
				outline-width:0 ;
			}
			/*center*/
			.center {
				width: 600px;
				height: auto;
				/*background: lightblue;*/
				margin: 0 auto;	
			}
			.center h2 {
				position: relative;
			}
			.center span {
				display: inline-block;
				position: absolute;
				right: 5px;
				top: 2px;
				padding: 0 5px;
				height: 20px;
				line-height: 22px;
				text-align: center;
				border-radius: 20px;
				background-color: #e6e6ea;
				font-size: 14px;
			}	
		/*增删节点*/          /*使用js实现*/
			ol,ul{
				padding:0;list-style:none;
				}
			li input{
				position:absolute;
				top:2px;
				left:10px;
				width:22px;
				height:22px;
				cursor:pointer;
				}
			p{
				margin: 0;
				}
			li p input{
				top:3px;
				left:40px;
				width:70%;
				height:20px;
				line-height:14px;
				text-indent:5px;
				font-size:14px;
				}
			li{
				height:32px;
				line-height:32px;
				background: #fff;
				position:relative;
				margin-bottom: 10px;
				padding:0 45px;
				border-radius:3px;
				border-left: 5px solid #629A9C;
				box-shadow: 0 1px 2px rgba(0,0,0,0.07);
				}
			ol li{
				cursor:move;
				}
			ul li{
				border-left: 5px solid #999;
				opacity: 0.5;
				}
			li a{
				position:absolute;
				top:2px;right:5px;
				display:inline-block;
				width:14px;
				height:12px;
				border-radius:14px;
				border:6px double #FFF;
				background:#CCC;
				line-height:14px;
				text-align:center;
				color:#FFF;
				font-weight:bold;
				font-size:14px;
				cursor:pointer;
				}
			
			
			/*footer*/ 
			.footer {
				text-align: center;
				color: #666666;
				font-size: 14px;
			}
			.footer a {
				text-decoration:none;
				color:#999;
			}
					
		</style>
	</head>
	<body>
		<div class="header">
			<div class="headerTop">
				<form action="javascript:submit()" method="post" id="form">
					<label for="title">ToDoList</label>
					<input type="text" name="title" id="title" value="" required="required" placeholder="添加ToDo"/>
				</form>
			</div>
		</div>
		<div class="center">
			<h2>正在进行
			<span id="todocount">0</span>
			</h2>
			<ol id="todolist" class="demo-box"></ol>
			<h2>已经完成
			<span id="donecount">0</span>
			</h2>
			<ul id="donelist"></ul>
		</div>
		<div class="footer">
			Copyright © 2014 todolist.cn&nbsp;<a href="javascript:listdateclear();" style="text-decoration: none;color: #999;">clear</a>
		</div>	
	</body>
	<script type="text/javascript">
	var listdate = [];			
	function submit(){
		var title = document.getElementById("title");
		if(title.value.length != 0) {
			var todoitem={"title":title.value,"done":false};
			listdate.push(todoitem);
			todolistload();		
			title.value=""
		}
	}
	function todolistload(){
		var todolist=document.getElementById("todolist");
		var todocount = document.getElementById("todocount");
		var todoString=""
		var todoCount=0
		for (var i = listdate.length - 1; i >= 0; i--) {
			if(!listdate[i].done){
				todoString+="<li><input type='checkbox' onchange='updatefield("+i+",\"done\",true)' />"
				+"<p id='todoitem"+i+"' onclick='edit("+i+")'>"+listdate[i].title+"</p>"
				+"<a href='javascript:deleteitem("+i+")'>-</a></li>";
				todoCount++;
			}
		};
		todocount.innerHTML=todoCount;
		todolist.innerHTML=todoString;
	}
	function donelistload(){
		var donelist=document.getElementById("donelist");
		var donecount = document.getElementById("donecount");
		var doneString="";
		var doneCount=0;
		for (var i = listdate.length - 1; i >= 0; i--) {
			if(listdate[i].done){
				doneString+="<li><input type='checkbox' onchange='updatefield("+i+",\"done\",false)' checked='checked'/>"+"<p id='todoitem"+i+"' onclick='edit("+i+")'>"+listdate[i].title+"</p>"
				+"<a href='javascript:deleteitem("+i+")'>-</a></li>";
				doneCount++;
			}
		};
		donecount.innerHTML=doneCount;
		donelist.innerHTML=doneString;
	}

	function updatefield(i,field,value){
		var todo = listdate[i];
		todo[field] = value;
		if (field=="done") {
			listdate.splice(i,1);	
			listdate.splice(0,0,todo); 
		}
		if (field=="title") {
			listdate.splice(i,1,todo);	
		}

		todolistload();		
		donelistload();
   }
    function deleteitem(i){
		listdate.splice(i,1);
		
		todolistload();		
		donelistload();
	}

	function edit(i)
	{
		var todoitem = document.getElementById("todoitem"+i);
		title = todoitem.innerHTML;
		todoitem.innerHTML="<input id='todoiteminput"+i+"' value='"+title+"' type='text'/>";

		var input = document.getElementById("todoiteminput"+i);
		input.setSelectionRange(0,input.value.length);
		input.focus();
		input.onblur =function(){
			if(input.value.length == 0){
				p.innerHTML = title;
			}
			else{
				updatefield(i,"title",input.value);
			
			}
		};
	}

	function listdateclear(){
		listdate = [];
		todolistload();		
		donelistload();
	}

</script>
</html>
